<template>
	<view class="content">
		<l-echart force-use-old-canvas="false" class="line-chart" ref="lineChart"></l-echart>
	</view>
</template>

<script>
	import * as echarts from '@/pages/subPackages/pagesE/components/lime-echart/static/echarts.min.js';
	import {
		mineCocoBonusHistory
	} from '@/api/wallet.js'
	import lEchart from '@/pages/subPackages/pagesE/components/lime-echart/components/l-echart/l-echart'
	export default {
		name:"lineChart",
		data() {
			return {
				yData:[],
				xData:[],
				myChart:'',
				resultData:[],
			}
		},
		mounted() {
			
			this.getMineCocoBonusHistory()
		},
		components:{
			lEchart
		},
		methods: {
			getNowDate(){
			    var date = new Date()
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				var d = date.getDate()
				d = d < 10 ? ('0' + d) : d
				var time = y + '-' + m + '-' + d;
				// this.ruleForm.duedate=time;
				return time
			},
			// 获取钱包信息
			async getMineCocoBonusHistory() {
				var data = {
					date:this.getNowDate()
				}
				var res = await mineCocoBonusHistory(data)
				var result = res.result
				this.resultData = res.result
				 this.yData = []
				 this.xData = []
				 result.forEach(item=>{
					 this.xData.push(this.timeConversion(item.bonusTime))
					 this.yData.push(item.coefficient)
				  })
				  // this.$emit('pointInGrid',this.resultData[this.resultData.length - 1])
				  //加载折线图数据
				  this.loadLineData();
			},
			timeConversion(dateData) {
				var date = new Date(dateData.replace(/-/g, '/'))
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? ('0' + m) : m
				var d = date.getDate()
				d = d < 10 ? ('0' + d) : d
				// var time = y + '-' + m + '-' + d;
				var time =m + '-' + d;
				// this.ruleForm.duedate=time;
				return time
			},
			//加载折线图数据
			loadLineData() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
					xData: this.xData,
					//y轴数据
					yData: this.yData
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#B3B8BE',
							interval:5, //刻度线
						},
						nameGap: 7,//坐标轴名称与轴线之间的距离。
						// x轴那天坐标轴线的颜色
						axisLine: {
							show: true, //隐藏轴线
							lineStyle: {
								color: '#B3B8BE',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						// x轴上面指示线
						axisPointer: {
						  show: true,
						  type: "line",
						  z:0,
						  lineStyle:{
							color:'#FFB6A5',
							type: "dashed",
							dashOffset: 0.5,
							join: "round"
						  }
						},
						triggerEvent:true,  
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						left:50,
						top: 20,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7',
							formatter: '{value}%' 
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						showContent: false,
						trigger: 'axis',
						triggerOn: 'click',
						// formatter:function(){
						// 	return '<div></div>';
						// },
						// backgroundColor:'#t',
						// textStyle : {
						// 	color: '#ffffff',
						// },

					},
					//设置曲线的颜色
					color: ['#FF4E24'],
					series: [{
						//这里是数据
						data: res.yData,
						type: 'line',
						//设置为平滑，默认为折线
						smooth: true,
						zindex:1,
						labelLine:{  
							normal:{  
								// 统一设置指示线长度
								length:45, 
							}  
						},
						// 高亮
						emphasis: {
						  disabled: true,
						  scale:3,
						  itemStyle: {
							color: "#FF4E24",
							borderColor: "#ffffff",
							borderWidth: 2.5,
							shadowColor: '#E0C4C4',
							shadowBlur: 4,
							shadowOffsetX: 0,
							shadowOffsetY: 2
						  }
						}
					}]
				};

				this.$refs.lineChart.init(echarts, chart => {
					chart.setOption(option);
					chart.on('click',params => {
						// console.log(params)
	                     this.$emit('pointInGrid',this.resultData[params.dataIndex])
					  });
						  
						chart.getZr().on('click', params => {
							// console.log(params)
							let pointInPixel = [params.offsetX, params.offsetY]
							if (chart.containPixel('grid', pointInPixel)) {
							  //点击第几个柱子
							  let pointInGrid = chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
							  // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置
							  // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容
							  // x轴数据的索引
							  let xIndex = pointInGrid[0]
							  
							  this.$emit('pointInGrid',this.resultData[xIndex])
							}
						  })

				});
				
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100%;
	}
</style>
